<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box1">盒子内容1</div>
<div class="box2">盒子内容21</div>
<div class="box2">盒子内容22</div>
<button>点击</button>
<h1 class="title">大标题</h1>
<script>
    // 获取DOM方式---5种
    // -通过id获取
    var box1 = document.getElementById('box1');
    console.log(box1)
    // -通过class获取
    var box2 = document.getElementsByClassName('box2');
    console.log(box2[1])
    // -通过标签获取
    var btn = document.getElementsByTagName('button');
    console.log(btn[0])
    // -通过css选取器获取
    var title1 = document.querySelector('.box2');
    console.log(title1)
    var title2 = document.querySelectorAll('.box2');
    console.log(title2[1])
</script>
</body>
</html>
